<template>
  <div>
    <el-form :inline="true">
      <el-form-item>
        <el-autocomplete
            v-model="state"
            :fetch-suggestions="querySearchAsync"
            placeholder="请选择医院来获得编码"
            @select="handleSelect"
            value-key="hospital"
            clearable
        >
        </el-autocomplete>
      </el-form-item>
      <el-form-item>
        <el-tag plain v-if="state">{{this.hcode}}</el-tag>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "HospitalSearch",
  data() {
    return {
      hospitals: [],
      state: '',
      timeout: null,
      hcode: ''
    };
  },
  mounted() {
    this.hospital = this.loadAll();
  },
  methods: {
    loadAll() {
      this.request.get("/hospital/findAll").then(res => {
        if (res.data.code === '200'){
          console.log(res);
          this.hospitals = res.data.data
        }
        else
          this.$message.error("请求出错")
      })
    },
    querySearchAsync(queryString, cb) {
      var hospitals = this.hospitals;
      var results = queryString ? hospitals.filter(this.createStateFilter(queryString)) : hospitals;
      clearTimeout(this.timeout);
      this.timeout = setTimeout(() => {
        cb(results);
      }, 1000 * Math.random());
    },
    createStateFilter(queryString) {
      return (state) => {
        return (state.hospital.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
      };
    },
    handleSelect(item) {
      //编写代码通过总线带出数据
      this.$bus.$emit('transferHcode',item.hcode)
      this.hcode = item.hcode
      console.log(this.state)
    }
  }
}
</script>

<style>
.el-tag{
  color: #606266;
  background: none;
  border: 1px solid #DCDFE6;
  height: 40px;
  line-height: 40px;
  font-size: 14px;
}
</style>